window.onload = function() {
    var obj = {
        ten: $("[class *=ten]"),
        six: $("[class *=six]"),
        colum: $("[class*=column]"),
        use24: true,
        init: function() {
            this.createDom(6);
            this.createDom(10);
        },
        createDom: function(n) {
            var div = '';
            for (var i = 0; i < n; i++) {
                div += '<div>' + i + '</div>';
            }
            if (n == 6) {
                this.six.append(div);
            } else {
                this.ten.append(div);
            }
        },
        Index: function(jq, use24) {
            this.colum = Array.from(jq);
            this.use24 = use24;
            this.start();
        },
        start: function() {
            setInterval(() => {
                var c = this.getClock();
                console.log(this.colum);
                this.colum.forEach(function(ele, index) {
                    // console.log(c[index]);
                    var n = c[index];
                    var offset = 430 - n * 86 + 'px';
                    $(ele).css({
                        'transform': 'translateY(' + offset + ')',
                    })
                    Array.from(ele.children).forEach(function(ele2) {
                        var op = 1 - Math.abs(n - parseInt($(ele2).html())) / 8;
                        $(ele2).css({
                            'opacity': op
                        })
                    })

                })
            }, 500)
        },
        getClock: function() {
            var d = new Date();
            return [this.use24 ? d.getHours() : d.getHours() % 12 || 12, d.getMinutes(), d.getSeconds()].reduce(function(pre, now) {
                //将22：10：09  转变为'221009'
                return pre + (now + '').padStart(2, '0');
                // return pre + ('0' + now).slice(-2);
            }, '')
        },

    }
    obj.init();
    obj.Index(obj.colum, false);
}